<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>showData</title>
    {# BootStrap css引入 #}
    <link rel="stylesheet" href="{{ url_for('static',filename='/libs/bootstrap-4.5.0-dist/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='/libs/layui/css/layui.css') }}">
    {# fontawesome css引入 #}
    <link rel="stylesheet" href="{{ url_for('static',filename='/libs/fontawesome-free-5.15.1-web/css/all.min.css') }}">

    <script type="text/javascript" src="{{ url_for('static',filename='/libs/jquery-3.5.1.min.js') }}"></script>
    <link href="../static/css/main.css" rel="stylesheet"/> <!-- 引入css样式表 -->

    <style>
        .bg-pink {
            background-color: #ffb7da;
        }

        .card {
            margin-bottom: 5px;
        }

        .card-body {
            text-align: center;
        }

        .card-body p {
            height: 40px;
            font-size: 30px;
            font-weight: bold;
        }

        .nav {
            background: #333;
        }

        .nav .nav-item {
            padding: 10px;
            color: #b0b0b0;
        }

        .nav .nav-item a {
            text-decoration: none;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
        }
    </style>

</head>
<body>
<div class="container">
    {% include 'header.html' %}
    <div class="text-title-box mt-5 ml-3 mb-2 badge badge-info">
        <h1 class="text-white">疫情防控信息填报表</h1>
    </div>

    <div>

        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="layui-form layui-form-pane"
                                 style="padding: 20px 0 0 0;">
                                <input type="text" name="covId" id="covId" value="{{ cov.id }}" style="display: none;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><font color="red">*</font>姓名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" id="name" value="{{ username }}"
                                               autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><font color="red">*</font>手机号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="phone" id="phone" value="{{ phone }}"
                                               autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><font color="red">*</font>体温(°C)</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="temperature" id="temperature"
                                               value="{{ cov.temperature }}"
                                               autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-col-xs12">
                                    <div class="layui-form-item" id="bioarea-wrap">
                                        <label class="layui-form-label add-width required">现住址</label>
                                        <label class="layui-form-label small-width">省</label>
                                        <div class="layui-input-inline">
                                            <select style="width: 100px;" class="level-1-select"
                                                    lay-filter="#bioarea-wrap1level"
                                                    name="currentProvince" id="currentProvince">
                                                <option value="">请选择省</option>
                                            </select>
                                        </div>
                                        <label class="layui-form-label small-width">市</label>
                                        <div class="layui-input-inline">
                                            <select class="level-2-select" lay-filter="#bioarea-wrap2level"
                                                    name="currentCity" id="currentCity">
                                                <option value="">请选择市</option>
                                            </select>
                                        </div>
                                        <label class="layui-form-label small-width">区</label>
                                        <div class="layui-input-inline">
                                            <select class="level-3-select" lay-filter="#bioarea-wrap3level"
                                                    name="currentCounty" id="currentCounty">
                                                <option value="">请选择市</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><font color="red">*</font>现住址明细</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="currentDetail" id="currentDetail"
                                               value="{{ cov.currentDetail }}"
                                               autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label" style="white-space: pre-wrap;height: auto;"><font
                                            color="red">*</font>是否发烧咳嗽(可多选)</label>
                                    <div class="layui-input-block">
                                        <input class="is-fever-cough one" id="is_fever_cough_1" type="checkbox"
                                               title="有发烧症状"
                                               name="is_fever_cough_1"
                                               lay-filter="is-fever-cough">
                                        <input class="is-fever-cough one" type="checkbox" title="有咳嗽症状"
                                               name="is_fever_cough_2" id="is_fever_cough_2"
                                               lay-filter="is-fever-cough">
                                        <input class="is-fever-cough one" type="checkbox" title="有呼吸困难症状"
                                               name="is_fever_cough_3" id="is_fever_cough_3"
                                               lay-filter="is-fever-cough">
                                        <input class="is-fever-cough nothing" type="checkbox" title="无以上症状"
                                               name="is_fever_cough_0" id="is_fever_cough_0"
                                               lay-filter="nothing">
                                    </div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label" style="white-space: pre-wrap;"><font
                                            color="red">*</font>是否确诊新型肺炎</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="is_covid" id="is_covid" title="是，医院已确诊" value="1"
                                        >
                                    </div>
                                    <div class="layui-input-block">
                                        <input type="radio" name="is_covid" id="is_covid" title="否，身体健康" value="0"
                                        >
                                    </div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label" style="white-space: pre-wrap;"><font
                                            color="red">*</font>是否疑似感染</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="is_infection" title="是，医院已确诊" value="1"
                                        >
                                    </div>
                                    <div class="layui-input-block">
                                        <input type="radio" name="is_infection" title="否，不是疑似感染者" value="0"
                                        >
                                    </div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label" style="white-space: pre-wrap;"><font
                                            color="red">*</font>目前居住地疫情风险等级</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="area_level" title="低风险" value="0"
                                        >
                                    </div>
                                    <div class="layui-input-block">
                                        <input type="radio" name="area_level" title="中风险" value="1"
                                        >
                                    </div>
                                    <div class="layui-input-block">
                                        <input type="radio" name="area_level" title="高风险" value="2"
                                        >
                                    </div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label" style="white-space: pre-wrap;"><font
                                            color="red">*</font>是否有防疫健康信息绿码</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="is_health_code" title="是，有健康绿码" value="1"
                                        >
                                    </div>
                                    <div class="layui-input-block">
                                        <input type="radio" name="is_health_code" title="否，没有健康绿码" value="0"
                                        >
                                    </div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label" style="white-space: pre-wrap;"><font
                                            color="red">*</font>是否从国(境)外返回</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="is_back_foreign" title="是，从国(境)外返回" value="1"
                                        >
                                    </div>
                                    <div class="layui-input-block">
                                        <input type="radio" name="is_back_foreign" title="否，一直在国内" value="0"
                                        >
                                    </div>
                                </div>
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label" style="white-space: pre-wrap;"><font
                                            color="red">*</font>是否接触国(境)外返回的人员</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="is_touch_foreigner" title="是，与国(境)外返回的人员有接触" value="1"
                                        >
                                    </div>
                                    <div class="layui-input-block">
                                        <input type="radio" name="is_touch_foreigner" title="否，没有接触国(境)外返回的人员" value="0"
                                        >
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">其他情况说明</label>
                                    <div class="layui-input-block">
                                        <textarea name="description" id="description" placeholder="若有其他情况，请详细描述"
                                                  class="layui-textarea">{{ cov.description }}</textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <input type="checkbox" title="我已阅读承诺书，并保证按承诺书内容执行。" lay-skin="primary"
                                           lay-filter="accept" id="promise" name="promise">
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <input id="report-submit" type="button" value="提交"
                                               class="layui-btn">
                                        <label class="">注意：<font color="red">*</font>为必填项</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="{{ url_for('static',filename='/libs/layui/layui.js') }}"></script>
<script>
    layui.config({
        base: '../static/js/'
    }).extend({
        bioarea: 'bioarea'
    });
</script>
<script>
    layui.use(['form', 'bioarea'], function () {

        var form = layui.form
            , bioarea = layui.bioarea;


        //监听复选框
        form.on('checkbox(is-fever-cough)', function (data) {
            var flag = data.elem.checked;
            var id = data.elem.name;
            if (flag) {
                $("#" + id).val("1");
            } else {
                $("#" + id).val("0");
            }
        });
        form.on('checkbox(nothing)', function (data) {
            var flag = data.elem.checked;
            var id = data.elem.name;
            if (flag) {
                $("#" + id).val("1");
            } else {
                $("#" + id).val("0");
            }
        });

        var currentProvince = '110000'
        var currentCity = '110100'
        var currentCounty = '110113'
        currentProvince = '{{ cov.currentProvince }}';
        currentCity = '{{ cov.currentCity }}';
        currentCounty = '{{ cov.currentCounty }}';

        var is_fever_cough_1 = '{{ cov.is_fever_cough_1 }}';
        var is_fever_cough_2 = '{{ cov.is_fever_cough_2 }}';
        var is_fever_cough_3 = '{{ cov.is_fever_cough_3 }}';
        var is_fever_cough_0 = '{{ cov.is_fever_cough_0 }}';

        if (is_fever_cough_1 == 1) {
            $("#is_fever_cough_1").prop("checked", true);
            $("#is_fever_cough_1").val("1");
        }
        if (is_fever_cough_2 == 1) {
            $("#is_fever_cough_2").prop("checked", true);
            $("#is_fever_cough_2").val("1");
        }
        if (is_fever_cough_3 == 1) {
            $("#is_fever_cough_3").prop("checked", true);
            $("#is_fever_cough_3").val("1");
        }
        if (is_fever_cough_0 == 1) {
            $("#is_fever_cough_0").prop("checked", true);
            $("#is_fever_cough_0").val("1");
        }

        var is_covid = '{{ cov.is_covid }}';
        var is_infection = '{{ cov.is_infection }}';
        var area_level = '{{ cov.area_level }}';
        var is_health_code = '{{ cov.is_health_code }}';
        var is_back_foreign = '{{ cov.is_back_foreign }}';
        var is_touch_foreigner = '{{ cov.is_touch_foreigner }}';
        if (is_covid == 1) {
            $("input[name='is_covid'][value='1']").prop("checked", true);
        } else if (is_covid == 0) {
            $("input[name='is_covid'][value='0']").prop("checked", true);
        }

        if (is_infection == 1) {
            $("input[name='is_infection'][value='1']").prop("checked", true);
        } else if (is_infection == 0) {
            $("input[name='is_infection'][value='0']").prop("checked", true);
        }
        if (area_level == 0) {
            $("input[name='area_level'][value='0']").prop("checked", true);
        } else if (area_level == 1) {
            $("input[name='area_level'][value='1']").prop("checked", true);
        } else if (area_level == 2) {
            $("input[name='area_level'][value='2']").prop("checked", true);
        }
        if (is_health_code == 1) {
            $("input[name='is_health_code'][value='1']").prop("checked", true);
        } else if (is_health_code == 0) {
            $("input[name='is_health_code'][value='0']").prop("checked", true);
        }
        if (is_back_foreign == 1) {
            $("input[name='is_back_foreign'][value='1']").prop("checked", true);
        } else if (is_back_foreign == 0) {
            $("input[name='is_back_foreign'][value='0']").prop("checked", true);
        }
        if (is_touch_foreigner == 1) {
            $("input[name='is_touch_foreigner'][value='1']").prop("checked", true);
        } else if (is_touch_foreigner == 0) {
            $("input[name='is_touch_foreigner'][value='0']").prop("checked", true);
        }

        bioarea.render({
            elem: '#bioarea-wrap',
            defaultData: {
                provinceCode: currentProvince,
                cityCode: currentCity,
                countyCode: currentCounty
            },
            form
        });
        layui.form.render();


        $("#report-submit").click(function (e) {
            e.preventDefault();
            let promise = $("#promise").is(':checked');
            if (!promise) {
                layer.msg("请阅读后并勾选确定！");
                return;
            }
            var id = $("#covId").val();
            var name = $("#name").val();
            var phone = $("#phone").val();
            var temperature = $("#temperature").val();
            var currentProvince = $("#currentProvince").val();
            var currentCity = $("#currentCity").val();
            var currentCounty = $("#currentCounty").val();
            var currentDetail = bioarea.getNameByCode(currentProvince) + bioarea.getNameByCode(currentCity) + bioarea.getNameByCode(currentCounty) + " " + $("#currentDetail").val();
            var is_fever_cough_1 = $("#is_fever_cough_1").val() == 'on' ? '0' : $("#is_fever_cough_1").val();
            var is_fever_cough_2 = $("#is_fever_cough_2").val() == 'on' ? '0' : $("#is_fever_cough_2").val();
            var is_fever_cough_3 = $("#is_fever_cough_3").val() == 'on' ? '0' : $("#is_fever_cough_3").val();
            var is_fever_cough_0 = $("#is_fever_cough_0").val() == 'on' ? '0' : $("#is_fever_cough_0").val();
            var is_covid = $("input[name='is_covid']:checked").val() == undefined ? "0" : $("input[name='is_covid']:checked").val();
            var is_infection = $("input[name='is_infection']:checked").val() == undefined ? "0" : $("input[name='is_infection']:checked").val();
            var area_level = $("input[name='area_level']:checked").val() == undefined ? "0" : $("input[name='area_level']:checked").val();
            var is_health_code = $("input[name='is_health_code']:checked").val() == undefined ? "0" : $("input[name='is_health_code']:checked").val();
            var is_back_foreign = $("input[name='is_back_foreign']:checked").val() == undefined ? "0" : $("input[name='is_back_foreign']:checked").val();
            var is_touch_foreigner = $("input[name='is_touch_foreigner']:checked").val() == undefined ? "0" : $("input[name='is_touch_foreigner']:checked").val();
            var description = $("#description").val();

            if (name == "") {
                layer.msg("姓名不为空！");
                return false;
            }
            if (phone == "") {
                layer.msg("电话号码不为空！");
                return false;
            }
            if (temperature == "") {
                layer.msg("体温不为空！");
                return false;
            }

            if (id === "") {
                $.ajax({
                    url: "/cov/covWrite",
                    type: "POST",
                    data: {
                        "name": name,
                        "phone": phone,
                        "temperature": temperature,
                        "currentProvince": currentProvince,
                        "currentCity": currentCity,
                        "currentCounty": currentCounty,
                        "currentDetail": currentDetail,
                        "is_fever_cough_1": is_fever_cough_1,
                        "is_fever_cough_2": is_fever_cough_2,
                        "is_fever_cough_3": is_fever_cough_3,
                        "is_fever_cough_0": is_fever_cough_0,
                        "is_covid": is_covid,
                        "is_infection": is_infection,
                        "area_level": area_level,
                        "is_health_code": is_health_code,
                        "is_back_foreign": is_back_foreign,
                        "is_touch_foreigner": is_touch_foreigner,
                        "description": description,
                    },
                    success: function (data) {
                        if (data.result == 200) {
                            layer.msg('填报成功······', {
                                icon: 16
                                , shade: 0.01
                                , time: 1000
                            }, function () {
                                window.location.reload();
                            });

                        } else if (data.result == 300) {
                            layer.msg("未知错误！！");
                            return false;
                        }
                    },
                    error: function (xhr, type, errorThrown) {
                        layer.msg("网络有误！")
                    }
                })
            } else {
                $.ajax({
                    url: "/cov/covUpdate",
                    type: "POST",
                    data: {
                        "id": id,
                        "name": name,
                        "phone": phone,
                        "temperature": temperature,
                        "currentProvince": currentProvince,
                        "currentCity": currentCity,
                        "currentCounty": currentCounty,
                        "currentDetail": currentDetail,
                        "is_fever_cough_1": is_fever_cough_1,
                        "is_fever_cough_2": is_fever_cough_2,
                        "is_fever_cough_3": is_fever_cough_3,
                        "is_fever_cough_0": is_fever_cough_0,
                        "is_covid": is_covid,
                        "is_infection": is_infection,
                        "area_level": area_level,
                        "is_health_code": is_health_code,
                        "is_back_foreign": is_back_foreign,
                        "is_touch_foreigner": is_touch_foreigner,
                        "description": description,
                    },
                    success: function (data) {
                        if (data.result == 200) {
                            layer.msg('修改成功······', {
                                icon: 16
                                , shade: 0.01
                                , time: 1000
                            }, function () {
                                window.location.reload();
                            });

                        } else if (data.result == 300) {
                            layer.msg("未知错误！！");
                            return false;
                        }
                    },
                    error: function (xhr, type, errorThrown) {
                        layer.msg("网络有误！")
                    }
                })
            }


        })
    });
</script>
</body>
</html>